<template>
  <div>
    <div
      class="rounded-lg p-4 m-2 border-white border text-white text-sm grid grid-cols-2 shadow-orange-500 shadow-lg"
    >
      <div>我的账号：{{ getUserInfo.username }}</div>
      <div>我的昵称：{{ getUserInfo.nickname }}</div>
      <div>我的级别：{{ getUserInfo.level }}级</div>
      <div>我的余额：{{ getUserInfo.balance.balance }}</div>
      <div>我的ID：{{ getUserInfo.id }}</div>
      <div>团队ID：{{ getUserInfo.team }}</div>
      <div>我的押金：{{ getUserInfo.balance.freezeMoney }}</div>
      <div>注册时间：{{ dayjs(getUserInfo.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
    </div>

    <div class="grid mt-5 grid-cols-4 p-2 gap-y-4 text-center text-white">
      <div
        @click="goTo('withdrawal-index')"
        class="h-20 text-center flex flex-col items-center justify-center"
      >
        <img src="@/assets/images/提现管理.png" alt="提现管理" />
        提现管理
      </div>
      <div
        @click="goTo('user-moeny')"
        class="h-20 text-center flex flex-col items-center justify-center"
      >
        <img src="@/assets/images/资金明细.png" alt="资金明细" />
        资金明细
      </div>
      <div
        @click="goTo('user-order')"
        class="h-20 text-center flex flex-col items-center justify-center"
      >
        <img src="@/assets/images/统计订单.png" alt="统计订单" />
        统计订单
      </div>
      <div
        @click="goTo('user-loginLog')"
        class="h-20 text-center flex flex-col items-center justify-center"
      >
        <img src="@/assets/images/登录记录.png" alt="登录记录" />
        登录记录
      </div>
      <div
        @click="showEditPwdModal = true"
        class="h-20 text-center flex flex-col items-center justify-center"
      >
        <img src="@/assets/images/登录密码.png" alt="登录密码" />
        登录密码
      </div>
      <div
        @click="showPayPwdModal = true"
        class="h-20 text-center flex flex-col items-center justify-center"
      >
        <img src="@/assets/images/支付密码.png" alt="支付密码" />
        支付密码
      </div>
      <div
        @click="showGoogleModal = true"
        class="h-20 text-center flex flex-col items-center justify-center"
      >
        <img src="@/assets/images/谷歌验证器logo.png" alt="谷歌验证器logo" />
        绑定谷歌
      </div>
      <div
        @click="showSettingModal = true"
        class="h-20 text-center flex flex-col items-center justify-center"
      >
        <img src="@/assets/images/设置.png" alt="设置" />
        基本设置
      </div>
    </div>

    <div class="p-1">
      <button
        @click="logoutFunc"
        class="w-full bg-gray-50 h-8 text-center border-gray-400 border rounded"
      >
        退出登录
      </button>
    </div>
  </div>

  <editPassword v-model:showModal="showEditPwdModal" />
  <editPayPwd v-model:show-modal="showPayPwdModal" />
  <settingModal v-model:show-modal="showSettingModal" />
  <editGoogleModal v-model:show-modal="showGoogleModal" />
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { useUserStore } from '@/stores/user'
import dayjs from 'dayjs'
import { showNotify } from 'vant'
import editPassword from './modal/editPassword.vue'
import editPayPwd from './modal/editPayPassword.vue'
import settingModal from './modal/setting.vue'
import editGoogleModal from './modal/editGoogle.vue'
import router from '@/router'

const { logout, getUserInfo, refreshBanlce } = useUserStore()
const showEditPwdModal = ref(false)
const showPayPwdModal = ref(false)
const showSettingModal = ref(false)
const showGoogleModal = ref(false)
let timer = null

function logoutFunc() {
  logout()
  showNotify({
    type: 'success',
    message: '退出成功'
  })
}

function goTo(name: string) {
  router.push({ name })
}

onMounted(() => {
  timer = setInterval(refreshBanlce, 1000)
})

onUnmounted(() => {
  clearInterval(timer)
})
</script>
